'use client'

import * as echarts from 'echarts'
import 'echarts-wordcloud'
import { useEffect, useRef } from 'react'

export default function WordCloud ({ list }) {

    const wordCloudRef = useRef()
    const wordCloudChart = useRef()

    const setOptionHelper = (list) => {
        return {
            series: [{
                type: 'wordCloud',
        
                // The shape of the "cloud" to draw. Can be any polar equation represented as a
                // callback function, or a keyword present. Available presents are circle (default),
                // cardioid (apple or heart shape curve, the most known polar equation), diamond (
                // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.
        
                shape: 'pentagon',
        
                // Keep aspect ratio of maskImage or 1:1 for shapes
                // This option is supported since echarts-wordcloud@2.1.0
                keepAspect: false,
        
                // A silhouette image which the white area will be excluded from drawing texts.
                // The shape option will continue to apply as the shape of the cloud to grow.
        
                // maskImage: maskImage,
        
                // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
                // Default to be put in the center and has 75% x 80% size.
        
                left: 'center',
                top: 'center',
                width: '98%',
                height: '98%',
                right: null,
                bottom: null,
        
                // Text size range which the value in data will be mapped to.
                // Default to have minimum 12px and maximum 60px size.
        
                sizeRange: [12, 60],
        
                // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45
        
                rotationRange: [-90, 90],
                rotationStep: 45,
        
                // size of the grid in pixels for marking the availability of the canvas
                // the larger the grid size, the bigger the gap between words.
        
                gridSize: 8,
        
                // set to true to allow word to be drawn partly outside of the canvas.
                // Allow word bigger than the size of the canvas to be drawn
                // This option is supported since echarts-wordcloud@2.1.0
                drawOutOfBound: false,
        
                // if the font size is too large for the text to be displayed,
                // whether to shrink the text. If it is set to false, the text will
                // not be rendered. If it is set to true, the text will be shrinked.
                // This option is supported since echarts-wordcloud@2.1.0
                shrinkToFit: true,
        
                // If perform layout animation.
                // NOTE disable it will lead to UI blocking when there is lots of words.
                layoutAnimation: true,
        
                // Global text style
                textStyle: {
                    fontFamily: 'sans-serif',
                    fontWeight: 'bold',
                    // Color can be a callback function or a color string
                    color: function () {
                        // Random color
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    focus: 'self',
        
                    textStyle: {
                        textShadowBlur: 10,
                        textShadowColor: '#333'
                    }
                },
                data: Array.isArray(list)
                    ? list
                    : []
            }]
        }
    }

    useEffect(() => {
        if (wordCloudChart.current !== null && wordCloudChart.current !== "" && wordCloudChart.current !== undefined) {
            wordCloudChart.current.dispose()
        }
        wordCloudChart.current = echarts.init(wordCloudRef.current)
    }, [])

    useEffect(() => {
        if (wordCloudChart.current !== null && wordCloudChart.current !== "" && wordCloudChart.current !== undefined) {
            wordCloudChart.current.setOption(setOptionHelper(list))
        }
    }, [list])

    useEffect(() => {
        return () => {
            if (wordCloudChart.current !== null && wordCloudChart.current !== "" && wordCloudChart.current !== undefined) {
                wordCloudChart.current.dispose()
            }
        }
    }, [])

    return (
        <div ref={wordCloudRef}  style={{ height: '100%', width: '100%' }}/>
    )
}